<template>
    <div>

        <i class="contact_mask mask"><!--导航和联系我们底层遮罩--></i>
        <!--联系我们-->
        <div class="Menu_contact" v-if="menulistconfig">
            <div class="box">
                <div class="h1"><span class="t">联系我们</span><a class="cursor_close closeContact"><i
                    class="close"></i></a></div>
                <dl>
                    <dd>
                        <div class="title">地址</div>
                        <div class="text">{{menulistconfig[3].name}}</div>
                    </dd>
                    <dd>
                        <div class="title">电话</div>
                        <div class="text">{{menulistconfig[4].name}}</div>
                    </dd>
                    <dd>
                        <div class="title">邮箱</div>
                        <div class="text">{{menulistconfig[5].name}}</div>
                    </dd>
                    <dd>
                        <div class="title">邮编</div>
                        <div class="text">101407</div>
                    </dd>
                    <dt>
                        <img src="../assets/images/code.png">
                        <p>微信公众号</p>
                    </dt>
                </dl>
            </div>
            <canvas id="contactBg" class="contactBg"></canvas>
        </div>
    </div>
</template>

<style lang="scss">
</style>

<script>
import {gsap, Quart} from "gsap";

export default {
    name: 'Contact',
    computed: {
        menulistconfig () {
            return this.$store.getters.getmenuconfig
        }
    },
    mounted () {
        let transDuration = 1.5;
        let Tween = gsap;
        let DM = { aniMultiplier: 1 }
        let navTop = { x: 0 };
        let nav = { x: 0 };
        let canvas;
        let context
        let tl;
        let n;

        //打开联系方式
        function openContact () {
            n = false
            canvas = document.getElementById("contactBg");
            context = canvas.getContext("2d");
            showNav();
            $('.mask_i').addClass('active')
            Tween.fromTo('.Menu_contact', { autoAlpha: 0, }, { autoAlpha: 1 })
            Tween.fromTo('.Menu_contact .box', .65 * transDuration, { alpha: 0 }, {
                alpha: 1,
            })
        }

        $(document).on('click', '.openContact', openContact)

        //关闭联系方式
        function closeContact () {
            hideNav()
            Tween.fromTo('.Menu_contact', { autoAlpha: 1, }, { autoAlpha: 0, delay: 0.5 })
            Tween.fromTo('.Menu_contact .box', .65 * transDuration, { alpha: 1 }, {
                alpha: 0,
            })
            $('.mask_i').removeClass('active')
        }


        $(document).on('click', '.contact_mask,.closeContact', function () {
            closeContact();
        })
        function showNav () {
            Tween.fromTo('.contact_mask', 1, { autoAlpha: 0 }, { autoAlpha: 1, })
            var aniSpeed = 0.2 * DM.aniMultiplier;

            tl = gsap.timeline({})

            tl.fromTo(nav, { x: 0 },
                {
                    x: n ? 320 : 420, ease: Quart.easeInOut, delay: 0,
                    duration: aniSpeed,
                    onComplete: function () {
                    }
                }, 'a').fromTo(navTop, { x: 0 },
                {
                    x: n ? 500 : 600, ease: Quart.easeInOut,
                    delay: 0,
                    duration: aniSpeed * 2.2,
                    onUpdate: $.proxy(animateNavBg, this)
                }, 'a')
        }

        function hideNav (fn) {
            Tween.fromTo('.contact_mask', 1, { autoAlpha: 1 }, { autoAlpha: 0, })
            var aniSpeed = 1.2 * DM.aniMultiplier;
            tl.timeScale(aniSpeed);
            tl.reverse();
            if (fn) fn();
        }

        function animateNavBg () {
            var newH = $(window).height();
            canvas.width = 600;
            canvas.height = newH;
            context.fillStyle = "#222222";
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(navTop.x, 0);
            context.lineTo(nav.x, newH);
            context.lineTo(0, newH);
            context.closePath();
            context.fill();
        }
    }
}
</script>
